<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>


<body>

    <div id="app">
        <button @click="type=!type">切换</button>
        <transition name="hd">
            <h1 v-if="type">后段军</h1>
        </transition>
    </div>


<script>


    var app=new Vue({
        el:'#app',
        data:{
            type:true,
        }
    });

</script>
<style type="text/css">
    .hd-enter,.hd-leave-to{
        opacity: 0;
    }
    .hd-enter-to{
        font-size: 200px;
    }
    .hd-enter-active,.hd-leave-active{
        transition:all 2s;
    }

</style>
</body>
</html>